---
title: Fonts
description: How to configure fonts in TanStack Router starter kit.
---

Saas UI Pro uses `Inter` as the default font, but you can easily change it to
any other font.

## Installation

<Info>
  We are using the variable version to reduce the total download size as opposed
  to including specific versions.
</Info>

To install a different font, you can use Font Source.

### Font source

```bash
cd apps/web && pnpm add @fontsource-variable/montserrat
```

Next import it in your root layout.

```tsx
// apps/web/app/routes/__root.tsx
import '@fontsource-variable/montserrat'

//....
```

And update your theme to use the new font.

```ts
// packages/theme/src/preset.ts

export const config = defineConfig({
  theme: {
    fonts: {
      heading: {
        value: 'Montserrat Variable, sans-serif',
      },
      body: {
        value: 'Montserrat Variable, sans-serif',
      },
    },
  },
})
```
